@govuk-frederic/arrow-left

ArrowLeft

Import

  import ArrowLeft from '@govuk-frederic/arrow-left';

Usage

Simple

<ArrowLeft />

Dark background

import { GREY_1 } from 'govuk-colours';

const darkBackground = {
  backgroundColor: GREY_1,
  minHeight: '320px',
  minWidth: '320px',
  padding: '20px',
};

<div style={darkBackground}>
 <ArrowLeft width={28} fill="white" />
</div>

Light background

import { WHITE } from 'govuk-colours';

const lightBackground = {
 backgroundColor: WHITE,
 minHeight: '320px',
 minWidth: '320px',
 padding: '20px',
};

<div style={lightBackground}>
 <ArrowLeft width={28} fill="black" />
</div>

Dark background & title

import { GREY_1 } from 'govuk-colours';

const darkBackground = {
 backgroundColor: GREY_1,
 minHeight: '320px',
 minWidth: '320px',
 padding: '20px',
};

<div style={darkBackground}>
 <ArrowLeft width={28} fill="white" color="white">
   Back to previous page
 </ArrowLeft>
</div>

Light background & title

import { WHITE } from 'govuk-colours';

const lightBackground = {
  backgroundColor: WHITE,
  minHeight: '320px',
  minWidth: '320px',
  padding: '20px',
};

<div style={lightBackground}>
 <ArrowLeft width={28} fill="black">
   Back to previous page
 </ArrowLeft>
</div>

Wrapped with anchor with title text

import { WHITE } from 'govuk-colours';

const lightBackground = {
 backgroundColor: WHITE,
 minHeight: '320px',
 minWidth: '320px',
 padding: '20px',
};

<div style={lightBackground}>
 <a href="http://example.com" style={{ color: '#005CA7' }}>
   <ArrowLeft width={28} fill="black">
     Back to previous page
   </ArrowLeft>
 </a>
</div>

Wrapped with anchor with title text on dark background

import { GREY_1 } from 'govuk-colours';

const darkBackground = {
 backgroundColor: GREY_1,
 minHeight: '320px',
 minWidth: '320px',
 padding: '20px',
};

<div style={darkBackground}>
 <a href="http://example.com" style={{ color: 'white' }}>
   <ArrowLeft width={28} fill="white">
     Back to previous page
   </ArrowLeft>
 </a>
</div>

Passing down onClick with title text

import { GREY_1 } from 'govuk-colours';

const darkBackground = {
 backgroundColor: GREY_1,
 minHeight: '320px',
 minWidth: '320px',
 padding: '20px',
};

<div style={darkBackground}>
 <ArrowLeft width={28} fill="white" onClick={action('clicked arrow button')}>
   Back to previous page
 </ArrowLeft>
</div>

Properties

Prop	Required	Default	Type	Description
children		undefined	string
color		undefined	string
fill		BLUE	string
onClick		undefined	func
width		20	number